<template>
  <div class="class-overview">
    <h1>{{ classInfo.className }}</h1>
    <p>教育类型: {{ classInfo.educationType }}</p>
    <p>年级: {{ classInfo.grade }}</p>
    <p>班级人数: {{ classInfo.nums }}</p>
    <el-table :data="classInfo.students" style="width: 100%" height="200">
      <el-table-column prop="userId" label="学号" width="50"></el-table-column>
      <!-- <el-table-column prop="grade" label="成绩" width="150"></el-table-column> -->
      <el-table-column prop="username" label="姓名" width="50"></el-table-column>
      <el-table-column prop="email" label="email" width="150"></el-table-column>

      <el-table-column prop="majorName" label="专业" width="100"></el-table-column>
      <!-- <el-table-column prop="hasGraduated" label="毕业率" width="100"></el-table-column> -->
      <!-- <el-table-column prop="phone" label="联系方式" width="150"></el-table-column>
      <el-table-column prop="wantJob" label="就业方向" width="150"></el-table-column> -->
      <!-- <el-table-column prop="grades.score1" label="第一学期" width="150"></el-table-column> -->
      <el-table-column prop="grades.score1" label="第一学期" width="100"></el-table-column>
      <el-table-column prop="grades.score2" label="第二学期" width="100"></el-table-column>
      <el-table-column prop="grades.score3" label="第三学期" width="100"></el-table-column>
      <el-table-column prop="grades.score4" label="第四学期" width="100"></el-table-column>
      <el-table-column prop="grades.score5" label="第五学期" width="100"></el-table-column>
      <el-table-column prop="grades.score6" label="第六学期" width="100"></el-table-column>
    </el-table>
    <div class="statistics">
      <h2>班级职务负责人</h2>
      <el-table :data="classBosses">
        <el-table-column prop="gaoyusong" label="班长" width="150"></el-table-column>
        <el-table-column prop="wuxin" label="学习委员" width="150"></el-table-column>
        <el-table-column prop="wangjiqi" label="团支书" width="150"></el-table-column>
        <el-table-column prop="heyun" label="宣传委员" width="150"></el-table-column>
        <el-table-column prop="shengbinghua" label="生活委员" width="150"></el-table-column>
        <el-table-column prop="yangziyi" label="心理委员" width="150"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    classInfo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      classBosses:
        [{
          gaoyusong: "高渔松",
          heyun: "何运",
          shengbinghua: "盛炳烨",
          wangjiqi: "汪济奇",
          yangziyi: "杨子怡",
          wuxin: "吴鑫",
        }],
    };
  },
  mounted() {
  },
  methods: {
    // getAllStudents() {
    //   axios
    //     .get(getStudentByClass, {
    //       params: {
    //         classId: "2101", // 将学生 ID 作为查询参数传递
    //       },
    //     })
    //     .then((response) => {
    //       if (response.data == null) {
    //         console.log("空回复");
    //       } else {
    //         console.log(response.data);
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
  },
};
</script>

<style scoped>
.class-overview {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 20px;
  border-radius: 5px;
  background-color: #f9f9f9;
  max-height: 550px;
  /* 设置最大高度 */
  overflow-y: auto;
  /* 超出部分显示滚动条 */
}

.statistics {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>